<script>
import *as echarts from 'echarts';

const option1 = {
  title:{
    text:'价格预测表'
  },
  tooltip:{
    trigger:'axis'
  },
  xAxis: {
    type: 'category',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160]
  },
  yAxis: {
    min: 36,
    max: 51,
    type: 'value'
  },
  legend: {
    data: ['TCN', 'MIC-TCN', 'VMD-MIC-TCN']
  },
  series: [
    {
      name: 'TCN',
      data: [46.9643912,41.4889151,46.68685394,46.9643912,43.23337626,43.10563867,43.1697714,43.7678906,40.00257584,46.95271397,46.68685394,43.78941628,38.0104218,47.17553603,46.81153426,42.11862482,47.03316094,41.97278078,47.22491184,43.52343433,46.71945478,44.08690816,40.23543255,41.06857046,42.23744782,46.85360029,39.06543261,42.44444625,42.24352353,41.90076034,46.95812499,46.90558903,43.72452802,46.82499993,43.4323532,43.9119098,46.7654644,46.43389058,46.94847253,46.12111172,47.07108926,43.2352355,46.8567543,43.77816868,44.0876754,47.45192109,46.5990823,46.95271397,46.9476443,46.8456473,41.31502507,47.16398678,43.62091163,41.31502507,44.56435638,43.81408779,42.1324624,43.63073005,40.05091747,46.98416695,43.7456356,46.98416695,37.15447686,46.88219896,46.12341325,42.265245,47.03316094,43.67454563,47.32343433,43.73041072,46.9643912,46.1474565,38.85674332,46.75908604,41.63052038,46.51364245,44.012491,41.54473654,46.8456733,45.19790861,47.10137826,47.11759282,42.68024618,41.01234535,46.97933287,46.93451346,41.8270884,47.17262678,44.1353546,47.00643494,45.905875,43.1234355,43.9068764,46.1323535,44.89756554,46.25425246,47.5653633,45.3454543,46.70641522,43.00095108,47.02063049,46.924,43.3854952,42.8967844,42.93810259,44.834564,47.52462621,46.70641522,45.79125844,47.35549687,46.79234035,42.1423245,46.7474534,47.13232453,43.58129565,46.59225183,47.01116698,41.90076034,46.80286748,45.11145602,46.83345433,44.53533018,46.95458534,43.23435342,46.97094574,47.01116698,47.01116698,41.23435253,46.97094574,46.12424343,46.97094574,46.93485455,46.12324345,46.98769029,41.92483455,46.45356456,46.91263318,46.82931818,46.98416695,47.8878213,44.76552413,46.24907191,42.23206602,43.34742811,47.01116698,42.43453631,41.64765384,43.27465834,47.37637585,43.86746543,46.36293878,47.32302135,43.44251043,44.06089184,46.73937417,46.12216556,44.23860117,43.92974938,44.99951128,46.98293878],
      type: 'line'
    },
    {
      name: 'MIC-TCN',
      data: [47.07520188,41.49774167,46.90677922,47.10856553,44.25602354,44.25331572,44.11252301,44.14368752,39.17910404,47.02552554,46.94664176,44.91667714,38.00156355,47.83014209,46.95568938,43.43177491,46.92261771,42.77503096,47.09152311,42.73096035,46.32870924,45.23265323,41.62290068,41.01632871,42.63052863,46.76401277,39.67763525,43.48342346,42.54870126,42.84261163,47.0276396,47.27957658,44.649011,46.60764566,42.26254096,44.32933258,46.34872567,46.25420161,47.02722189,46.03005185,47.54634899,42.59631709,46.71031843,44.83705985,44.22951692,47.81137459,46.07933339,46.96066784,46.42591022,46.76134868,41.63623599,47.78333365,44.34322479,42.11205725,45.32361379,44.45258315,42.55457443,44.69511957,40.20221529,47.13501987,43.94311537,47.07153682,37.97684803,46.8843604,47.06542481,38.70244961,46.8204232,42.61946353,47.36220713,43.71577126,47.18575436,46.72402309,36.9309489,46.72083406,41.47276964,47.35854853,44.38400867,41.81256836,46.57878574,45.38648422,47.07426147,47.23934147,43.04435953,41.71991025,47.09809377,47.06581308,41.73403978,47.02636124,44.64331557,47.14914,45.64711959,42.76444637,44.66102801,47.0912694,44.92007839,47.14679003,49.04519796,45.07105557,46.66065302,44.93681566,47.14510041,46.73430898,44.02229057,43.44357956,44.48367631,43.95671715,47.24845385,46.50888847,45.85068026,48.28043147,46.86154546,42.06664408,46.91985339,47.03327966,44.45366611,46.17275095,47.06871742,42.05875245,46.73727626,47.58770253,47.27768792,46.99830937,46.53994224,43.44914743,47.16914325,47.09157441,47.12043171,42.17330723,47.15777692,46.83499496,47.0729569,46.07138331,46.25499939,47.07421984,42.66834902,46.9107626,47.00633276,47.03831194,47.16592772,47.2668213,44.88552413,46.94907191,41.95206602,43.57999962,47.14248874,41.44530901,41.49228594,44.20715515,47.91939292,44.80770509,46.99731135,47.48875355,41.91457812,44.13900076,47.11753605,45.40449017,45.06831376,42.59683993,44.10106838,46.95693592],
      type: 'line'
    },
    {
      name: 'VMD-MIC-TCN',
      data: [47.10758321,43.42674333,46.76293878,47.10758321,43.72059539,43.69111531,44.2634847,43.82542314,38.70490933,46.90363827,46.76293878,44.58603117,39.4574372,47.07339423,46.85674376,43.53814932,47.24094867,43.23666187,47.01588794,43.41721423,46.78623857,44.77258061,39.11046789,43.12716866,43.68520234,46.83295968,41.70892757,43.39455389,43.14082805,43.38362167,46.9848828,46.77468932,44.48963989,46.76293878,43.39007207,44.486093,46.56705412,46.61914543,46.89516044,46.56286883,47.2387432,43.25566121,46.63474521,43.69695778,44.16089184,47.32644039,46.7178878,46.90363827,46.86194901,46.77042321,39.66963037,47.16441752,44.4288229,39.66963037,45.08999345,44.39561077,43.60256492,44.08109218,39.25795586,46.97127696,43.45340863,46.97127696,41.04142549,46.9898656,46.91423071,41.17884358,47.24094867,43.57699912,47.08895896,44.2314203,47.10758321,46.98244116,39.93244659,46.66835598,43.44370067,46.92636854,43.77331203,42.96808237,46.66913225,45.99117453,47.02745864,47.35763167,43.87511868,41.10435725,46.95622427,46.96574483,42.34843553,47.32179568,44.22957425,47.02745864,44.7718028,43.67485968,44.14805862,46.93855712,44.9677622,46.72428423,47.46733303,44.58603117,46.86896626,43.87356236,46.9848828,46.91005614,43.80777939,43.74477111,43.77316261,44.14805862,47.21274808,46.86896626,46.7178878,47.14641732,46.87950474,41.66912881,46.69414409,47.24094867,44.41021477,46.71716845,47.02745864,43.38362167,46.83295968,47.01588794,46.95081647,45.67208861,46.83609026,43.74406534,46.96574483,47.02745864,47.02745864,40.39649124,46.96574483,46.87950474,46.96574483,46.7267975,46.61914543,46.9848828,43.25568616,46.9898656,46.76293878,46.96574483,46.97127696,47.06477525,44.8680434,47.24094867,41.45131506,43.91824805,47.02745864,43.42164531,41.72138149,43.87356236,47.1264435,43.91654091,46.76293878,47.22302135,43.35251043,44.16089184,46.93937417,46.00216556,44.58603117,43.82974938,44.20951128,46.76293878],
      type: 'line'
    }
  ]
};

export default {
  name: "Predict",
  data(){
    return{
      isCollapse:false, //不收缩
      asideWidth:"200px",
      collapseIcon:"el-icon-s-fold"
    }
  },
  mounted() {
    let lineDom = document.getElementById('line');
    let lineChart = echarts.init(lineDom);
    lineChart.setOption(option1);

  },
  methods:{
    handleCollapse(){
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse?"64px":'200px'
      this.collapseIcon = this.isCollapse? 'el-icon-s-unfold':'el-icon-s-fold'
    },
  }
}

</script>

<template>
  <div>
    <el-container>
      <!--侧边栏-->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;" >
          <img src="@/assets/logo1.png" alt="" style="width: 40px;height: 40px;">
          <transition name="el-fade-in-linear">
            <span style="margin-left: 5px;font-size: 20px" v-show="!isCollapse">carbon2024</span>
          </transition>
        </div>

        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style=" border: none" :default-active="$route.path">
          <el-menu-item index="/">
            <i class="el-icon-house"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/pridict">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>价格预测</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/element">
            <template slot="title">
              <i class="el-icon-house"></i>
              <span>历史数据</span>
            </template>
          </el-menu-item>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item>用户信息</el-menu-item>
            <el-menu-item>管理员信息</el-menu-item>
            <el-menu-item index="/">数据维护</el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>

      <el-container>
        <!-- 头部区域-->
        <el-header>
          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{path: 'localhost'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path: '/user'}">用户管理</el-breadcrumb-item>

          </el-breadcrumb>

          <div style="flex: 1; width: 0;display: flex; align-items: center; justify-content: flex-end">
            <el-dropdown x-placement="bottom">
              <div style="display: flex;align-items: center; cursor: default">
                <img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px;">
                <span>管理员</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card>
                <div style="width: 100%;height: 500px;" id="line"></div>
              </el-card>
            </el-col>

          </el-row>
        </div>


      </el-container>
    </el-container>
  </div>

</template>

<style>
.el-menu--inline .el-menu-item{
  background-color: #000c17 !important;
  padding-left: 49px !important;
}
.el-menu--inline{
  background-color: #000c17 !important;
}
.el-menu-item:hover,.el-submenu__title:hover{
  color: #fff !important;
}
.el-submenu__title:hover i{
  color: #fff !important;
}
.el-menu-item.is-active{
  background-color: #1890ff !important;
  border-radius: 10px !important;
  width: calc(100% - 8px);
  margin-left: 4px;
}
.el-menu-item.is-active i, .el-tooltip{
  margin-left: -4px;
}
.el-menu-item{
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu__title{
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu .el-menu-item{
  min-width: 0 !important;
}
.el-menu--inline .el-menu-item.is-active{
  padding-left: 45px !important;
}

.el-aside{
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.el-header{
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  display: flex;
  align-items: center;
}
</style>